<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title>
	<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript">
	
	/*
		注册页面的功能
			1.登录按钮
			2.填写用户名，用户名由1-10位数组字母汉字组成，正则表达式验证，与数据库比对重复
			3.两次填写密码，必须相同,6-12位任意字符
			4.验证码验证，点击图片刷新验证码，填写验证码在后台比对
			5.全部填写完毕且符合要求即可成功注册
			6.自动跳转进登录页面
	*/
	$(function (){
		$("#veriCode").click(function () { 
			var v = Math.random();
			$("#veriCode").attr("src", "/movies/UserServlet?action=veriCodeServlet&x="+v);
		})
		$("#name").blur(checkusername);
		$("#mima1").blur(checkuserpass);
		$("#mima2").blur(checkuserpassagain);
		$("#codeText").blur(yanzhengma);
		$("#form").submit(function () {//submit事件是加给from标签的
			if(checkusername() && checkuserpass() && checkuserpassagain() && yanzhengma()){
				return true;
			}
		    $("#zhuceshibai").html("注册失败，请重新输入");
		    $("#zhuceshibai").css("color", "red");
			return false;
		});
	})
	function checkusername() {
		var zz = /^[\w\u4e00-\u9fa5]{1,10}$/;
		if ($("#name").val() == null) {
			$("#namesp").html("用户名不能为空");
			$("#namesp").css("color", "red");
			return false;
		}
		if (!zz.test($("#name").val())){
			$("#namesp").html("用户名由十位数字、字母或汉字组成");
			$("#namesp").css("color", "red");
			return false;
		}
		var un = $("#name").val();
		var flag = null;
		$.ajax({
			url:"/movies/UserServlet?action=checkUsername",
			type:"get",
			async:false,
			data:"un="+ un,
			success:function(mes){
				flag = mes; //传出来的是一个字符串！
			}
		})
		
		if (flag != "true") {
			//没有重复
			$("#namesp").html("用户名正确");
			$("#namesp").css("color", "green");
			 
		}else{
			$("#namesp").html("用户名重复");
			$("#namesp").css("color", "red");
		}
		return flag;
		
	}
	function checkuserpass() {
		var cc = /^\w{6,12}$/;
		if(!cc.test($("#mima1").val())){
			$("#mima1sp").css("color",  "red");
        	$("#mima1sp").html("密码强度过低");
        	return false;
		}
		if($("#mima1").val() == ""){
			$("#mima1sp").css("color",  "red");
        	$("#mima1sp").html("密码不能为空");
        	return false;
		}else {
			$("#mima1sp").css("color",  "green");
        	$("#mima1sp").html("密码正确");
        	checkuserpassagain();
        	return true;
		}
	}
	function checkuserpassagain() {
		if ($("#mima1").val() != $("#mima2").val()) {
        	$("#mima2sp").css("color",  "red");
        	$("#mima2sp").html("两次密码不一致");
        	return false;
		}else {
			$("#mima2sp").css("color",  "green");
        	$("#mima2sp").html("密码正确");
        	return true;
		}
	}
	function yanzhengma() {
		var flag = false;
		if ($("#codeText").val()=="") {
			 
			$("#sp").html("验证码错误");
			$("#sp").css("color", "red");
			 return false;
		}
		if ($("#codeText").val().trim().length != 4) {
			
			$("#sp").html("验证码错误");
			$("#sp").css("color", "red");
			 return false;
		}
		$.ajax({
			url:"/movies/UserServlet?action=checkVeriCodeServlet",
			type:"post",
			async:false,
			data:"codeText="+ $("#codeText").val().trim(),
			success:function(mes){ 
				if(mes == "true"){
					 
					$("#sp").css("float", "left"); 
					$("#sp").html("验证码正确");
					$("#sp").css("color", "green");
					flag = true;
				}else{
					
					$("#sp").html("验证码错误");
					$("#sp").css("color", "red");
				}
			}
		})
		
		return flag;
	}
	</script>
	<style type="text/css">
		body{
			background-image: url('/movies/images/denglu.jpg');
            background-size:130%;
		}
		#panel{
			width: 350px;
			height: 550px;
			border-radius: 20px; 
            margin: 50px 900px;
            padding: 50px;
            background: rgba(242,242,242,0.9);
		 }
        #title {
            font-size: 35px;
            font-weight: 600;
        }
        #title p {
            font-size: 15px;
            font-weight: 500;
        }
         
        #panel input{
            border: 1px solid #ddd;
            width: 350px;
            height: 40px;
            background: #fff;
            border-radius: 4px; 
        }
        #panel #reg{
            width: 350px;
            height: 50px;
            background: lightblue;
            border-radius: 40px;
            color: white;
            font-weight: 600;
            font-size: 18px;
        }
        #panel #namesp,#mima1sp,#mima2sp,#sp{
        	font-size: 13px;
        }
         #panel #veriCode{
        	vertical-align: middle;
        }
	</style>

</head>
<body>
	<div id="panel">
        <div id="title">
            欢迎注册
            <p>已有帐号？<a href="<%=request.getContextPath()%>/denglupage.jsp">登录</a></p>
            <label id="zhuceshibai" style="font-size: 13px"></label>
        </div> 
        <br>
        <div>
            <form action="/movies/UserServlet?action=register" method="post" id="form">
                <br>
                <span>&emsp;用户名 </span> <input id="name" type="text" name="name"> 
            	<label id="namesp"></label>
                <br>
           
                <span>&emsp;密&emsp;码 </span><input id="mima1" type="password" name="mima1">
                <label id="mima1sp"></label>
                <br>
             
                <span>确认密码 </span><input id="mima2" type="password" name="mima2">
                <label id="mima2sp"></label>
                <br> 
       
                <span>&emsp;验证码 </span><br><input id="codeText" name="codeimg" type="text" style="width: 240px;">
                <img id="veriCode" src="/movies/UserServlet?action=veriCodeServlet">
                <label id="sp"> </label>
                <br>
               	<br>
                <input id="reg" type="submit" value="注册">
            </form>
        </div>
	</div>
</body>
</html>